<!-- src/App.vue -->
<template>
  <div>
    <Header1 />
    <Nav />
  <div id="app11" class="layout1">
    
    <!-- 检索栏 -->
    <div class="search-bar">
      <input type="text" placeholder="请输入检索关键词" v-model="searchQuery" />
      <button @click="performSearch">搜索</button>
    </div>

    <!-- 文献内容 -->
    <div class="document-list">
      <div class="document-item" v-for="doc in filteredDocuments" :key="doc.id">
        <img :src="doc.image" alt="文献封面" class="document-image" />
        <div class="document-info">
          <h3>{{ doc.title }}</h3>
          <p>{{ doc.date }}</p>
          <p>{{ doc.summary }}</p>
        </div>
      </div>
    </div>
    </div>
    <Footer1 />
  </div>
</template>

<script>
import Header1 from '@/modules/module2/module2-tudi/components/Header1.vue';
import Nav from '@/modules/module2/module2-tudi/components/Nav.vue';
import Footer1 from '@/modules/module2/module2-tudi/components/Footer1.vue';
export default {
  components: {
    Header1,
    Nav,
    Footer1
  },
  data() {
    return {
      searchQuery: '',
      documents: [
        {
          id: 1,
          title: '《台湾问题与新时代中国统一事业》白皮书',
          date: '2022-08-16',
          summary: '《台湾问题与新时代中国统一事业》白皮书新华社北京8月10日电国务院台湾事务办公室、国务院新闻办公室10日发表《台湾问题与...',
          image: '../../../../../public/213.jpg' // 替换为实际的图片路径
        },
        {
          id: 2,
          title: '在中国共产党第二十次全国代表大会上的报告',
          date: '2022-09-17',
          summary: '当地时间9月16日，国家主席习近平在撒马尔罕国际会议中心出席上海合作组织成员国元首理事会第二十二次会议并发表重要讲话。新...',
          image: '../../../../../public/214.jpg' // 替换为实际的图片路径
        },
        {
          id: 3,
          title: '在中国共产党第二十次全国代表大会上的报告',
          date: '2022-10-18',
          summary: '新华社北京10月25日电高举中国特色社会主义伟大旗帜为全面建设社会主义现代化国家而团结奋斗——在中国共产党第二十次全国代...',
          image: '../../../../../public/215.jpg' // 替换为实际的图片路径
        },
        {
          id: 4,
          title: '在学习贯彻习近平新时代中国特色社会主义思想主题教育',
          date: '2023-05-02',
          summary: '在学习贯彻习近平新时代中国特色社会主义思想主题教育工作会议上的讲话（2023年4月3日）习近平...',
          image: '../../../../../public/216.jpg' // 替换为实际的图片路径
        },
        // 更多文献数据
      ],
      filteredDocuments: []
    };
  },
  methods: {
    performSearch() {
      this.filteredDocuments = this.documents.filter(doc =>
        doc.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  mounted() {
    this.filteredDocuments = this.documents; // 初始化时显示所有文献
  }
}
</script>

<style>
/* 全局样式 */
body {
  font-family:宋体, sans-serif;
  margin: 0;
  padding: 0;
}

/* 布局样式 */
.layout1 {
  padding: 20px;
  border: 1px solid #ccc; /* 添加边框 */
  background-color: #fff; /* 设置背景颜色 */
}

/* 检索栏样式 */
.search-bar {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-end; /* 水平靠右 */
  margin-bottom: 20px;
  padding-right: 20px; /* 可选：为搜索栏添加右边距 */
}
.search-bar input {
  padding: 8px;
  font-size: 16px;
  margin-right: 10px;
}
.search-bar button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #d32f2f;
  color: white;
  border: none;
  cursor: pointer;
}

/* 文献项样式 */
.document-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  margin-left: 100px; /* 设置左边距 */
  margin-right: 100px;
  border-bottom: 1px solid #ccc; /* 添加底部横线 */
}
.document-item:last-child {
  border-bottom: none; /* 移除最后一个文献项的底部横线 */
}
.document-image {
  width: 200px;
  height: 150px;
  margin-right: 20px;
}
.document-info h2 {
  margin: 0;
}
.document-info p {
  margin: 5px 0;
}
</style>